import React from 'react'
import { connect } from 'react-redux'
import PropTypes from 'prop-types'
import { projectLabelView as projectDuck } from 'ducks'
import Constants from 'utils'
import { SwitchCase, Case } from 'components/switch'
import GroupList from './groupList'
import ImageList from './imageList'
import RectangleBrush from './brushRectangle'
import PolygonBrush from './brushPolygon'
import ImageNav from './imageNav'
import SelectClasses from './selectClasses'
import LabelDone from './labelDone'
import TimeTravel from './timeTravel'
import ItemNav from './itemNav'

const toolBoxStyle = {
  height: '107px',
  borderTopWidth: '0px',
  borderBottom: '1px solid #DFDFDF',
  background: Constants.COLOR_TOOLBAR,
}

const RibbonView = ({ selectedBrush, lableState }) => (
  <div style={toolBoxStyle}>
    <GroupList>
      {/* <ImageList /> */}
      <TimeTravel lableState={lableState} />
      <ItemNav lableState={lableState} />
      <SelectClasses />
      {/* <LabelDone /> */}
      {/* <TimeTravel /> */}
      <ImageNav />
      <SwitchCase switchValue={selectedBrush}>
        <Case value="rectangle" component={RectangleBrush} />
        <Case value="polygon" component={PolygonBrush} />
      </SwitchCase>
    </GroupList>
  </div>
)

RibbonView.propTypes = {
  selectedBrush: PropTypes.string,
}

RibbonView.defaultProps = {
  selectedBrush: '',
}

const mapStateToProps = state => ({
  selectedBrush: projectDuck.selectors.selectedBrush(state),
})

export default connect(mapStateToProps)(RibbonView)
